<template>
	<view>
		<!-- <image src="https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png" style="width: 100%;height: 100vh;position: absolute;"></image> -->
		<view class="gui-relative">
			<!-- 课程活动 -->
			<image :src="$uimg+'5f24106f90f30801abcc9620'" class="imgs"></image>
			<view class="title">
				<text class="gui-margin-x">{{course.name}}</text>
				<view class="gui-flex common_sp_be gui-text gui-color-gray" style="margin-top: 10rpx;">
					<text class="gui-margin-x">{{course.clickNums}}次观看</text>
					<text class="gui-margin-x">已学{{course.Progress}}%</text>
				</view>
			</view>
			<!-- 目录 -->
			<view class="mulu gui-margin-x gui-margin-top">
				<text>目录({{directory}})</text>
				<view v-for="(item,index) in courseLessonList">
					<view class="gui-text gui-padding-small">
						<text class="">{{item.name}}</text>
						<text class="gui-margin-x">第一章</text>
					</view>
					<view class="gui-margin-x gui-text gui-margin-top" v-for="(video,inde) in children" :key="inde" @click="getVideo(item)">
						<text class="gui-icons gui-bg-blue gui-color-white gui-margin-x" style="font-size: 20rpx;padding:10rpx;">&#xe649;</text>
						<text style="" class="gui-margin-top">{{video.title}}</text>
					</view>
				</view>
			</view>
			<!-- 简介 -->
			<view class="gui-margin-x gui-margin-top">
				<text>简介</text>
				<text class="gui-block gui-margin-top">{{course.courseContent}}</text>
			</view>
			
			<!-- 评论 -->
			<view class="gui-margin-x gui-margin-top">
				<text>评论({{comment.total}})</text>
				<view class="gui-margin-top gui-flex" v-for="item in comment.rows">
					<image src="https://app.lgwisdomunion/static/img/default.6a06b2e6.jpg" style="height: 80rpx;width: 80rpx;border-radius: 50%;"></image>
					<view class="gui-flex gui-column gui-margin-x gui-text">
						<view>
							<text>{{item.userName}}</text>
							<text class="gui-color-gray gui-margin-x">{{item.crtTime}}</text>
						</view>
						<text>{{item.courseCommentContent}}</text>
					</view>
				</view>
			</view>
			<view class="gui-flex gui-bg-white gui-align-items-center button-box" style="">
				<input v-model="courseCommentContent" placeholder="评论该课程" class="gui-bg-gray gui-border-radius commentInput" @focus="focusState" @blur="blur" style=""/>
			<view class="gui-flex" v-if="show == '1' ">
				<view class="gui-margin-x">
					<text class="gui-icons gui-block gui-text-center">&#xe6b8;</text>
					<text>评论</text>
				</view>
				<view @click="collection">
				<text class="gui-icons gui-block gui-text-center" :class="collectionNum==1?'gui-color-red gui-bold':''">&#xe645;</text>
				<text>收藏</text>
				</view>
			</view>
			<view v-if="show =='2'">
				<button style="height:70rpx;font-size: 30rpx;width: 160rpx;line-height:70rpx;" class="gui-margin-x" @click="setComment">发送</button>
			</view>
			
			</view>
			<view class="gui-color-gray gui-text-center gui-margin-top" style="width: 100%;">已经到底了</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:1,
				course:{},
				id:0,
				actId:0,
				courseId:0,
				isCom:'',
				directory:0,
				courseLessonList:[],
				children:[],
				comment:[],
				courseCommentContent:'',
				collectionNum:0,
			}
		},
		onLoad(option) {
			console.log("option",option)
			this.id = option.id
			this.actId = option.actId
			this.courseId = option.courseId
			this.isCom = option.isCom
			// console.log("getCourse",this.getCourse)
			this.getCourse()
			// this.beginAct()
			// // this.getFront()
			this.getComment()
			this.Query()
		},
		methods: {
			getCourse(){
				let data = {
					courseId:this.courseId,
					isCom:this.isCom
				}
				this.$lg.Post("/API-COURSE/front/courseInfo/updateCourseClickNum",data,(res)=>{
					console.log(res.data)
					this.course = res.data
					this.directory = this.course.courseLessonList.length
					this.courseLessonList = res.data.courseLessonList
					// console.log("courseLessonList",this.courseLessonList)
					// this.children =  res.data.courseLessonList.children 
					for(let i in this.courseLessonList){
						let m = this.courseLessonList[i].children
						this.children = m
					}
				})
			},
			// beginAct(){
			// 	let data = {
			// 		actId:this.actId,
			// 		id:this.id
			// 	}
			// 	this.$lg.Get("/APP/front/activity/beginAct",data,(res)=>{
			// 		console.log(res)
			// 	})
			// },
			// getFront(){
			// 	let data ={
			// 		courseId:this.courseId,
			// 		isCom:''
			// 	}
			// 	this.$lg.Post("/API-COURSE/front/courseInfo/getFront",data,(res)=>{
			// 		console.log(res)
			// 	})
			// }
			
			getVideo(d){
				console.log("d",d)
				let data = {
					courseId:d.courseId,
					videoId:d.children[0].videoId,
					stepId:d.id,
					partId:d.parentId,
					isCom:this.isCom
				}
				console.log(data)
				this.$lg.Post("/API-COURSE/front/courseInfo/insertLearnCourseLog",data,(res)=>{
					console.log(res)
				})
				
			},
			
			// 获取评论
			getComment(){
				let data = {
					courseId:this.courseId,
					page:1,
					pageSize:10,
					isCom:this.isCom
				}
				this.$lg.Post("/API-COURSE/front/courseComment/queryCourseComment",data,(res)=>{
					console.log("getComment",res)
					this.comment = res.data
				})
			},
			Query(){
				let data = {
					objectId:this.courseId,
					isCom:this.isCom
				}
				this.$lg.Post("/APP/collect/query",data,(res)=>{
					console.log(res)
				})
			},
			// 发送评论
			setComment(){
				let data = {
					courseId:this.courseId,
					courseCommentContent:this.courseCommentContent,
					isCom:this.isCom
				}
				if(this.courseCommentContent == '' || this.courseCommentContent ==null){
					uni.showToast({
						title:"请输入你的评论",
						icon:"none"
					})
				} else {
					this.$lg.Post("/API-COURSE/front/courseComment/insertCourseComment",data,(res)=>{
						if(res.data.code == 1){
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
						}
						this.courseCommentContent =''
						this.getComment()
						
					})
				}
			},
			// 收藏
			collection(){
				if(this.collectionNum == 0){
					let data = {
						objectName:this.course.name,
						objectId:this.courseId,
						type:2,
						resourceId:this.course.imageId,
						isCom:this.isCom
					}
					console.log(data)
					this.$lg.Post("/APP/collect/insert",data,(res)=>{
						console.log(res)
						this.collectionNum=1
					})
				} else {
					let data = {
						ids:this.courseId,
						isCom:this.isCom
					}
					this.$lg.Post("/APP/collect/delete",data,(res)=>{
						console.log(res)
						if(res.code=='1'){
							uni.showToast({
								title:"收藏取消成功",
								icon:"none"
							})
							this.collectionNum = 0
						}
					})
				}
			},
			focusState(){
				// console.log(e)
				this.show=2
			},
			blur(){
				setTimeout(()=>{
					this.show=1
				},2000)
			}
		}
	}
</script>

<style>
page{
	background-image: url("https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png");
	padding-bottom: 100rpx;
}
.imgs{
	width: 100%;
	height: 400rpx;
}
.title{
	padding: 10rpx;
	height: 80rpx;
	width: 100%;
}
.common_sp_be{
	justify-content: space-between;
}
.mulu{
	height: 180rpx;
	
}
	.button-box{
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
	}
	.commentInput{
		height: 60rpx;
		margin: 20rpx;
		padding-left: 20rpx;
		width: 450rpx;
	}
</style>
